<template>
   <el-form  :model="ruleForm" class="demo-form-inline" :rules="rules">
     <el-form-item label="用户姓名" prop="username">
       <el-input style="width: auto" v-model="ruleForm.username" />
     </el-form-item>
     <el-form-item   label="密码" prop="password">
       <el-input type="password"  style="width: auto" v-model="ruleForm.password" />
     </el-form-item>
     <el-form-item   label="身份证号" prop="idcard">
       <el-input style="width: auto"  v-model="ruleForm.idcard" />
     </el-form-item>
     <el-button type="success" @click="zhuce()">注册</el-button>
   </el-form>
   
   
</template>
<script  setup>
import { add } from '@/api/login';
import {  ElMessage } from 'element-plus';
import { ref } from 'vue';
import {reactive} from "vue";



const ruleForm=ref({})

const rules = reactive({
  idcard: [
    { required: true, message: '请输入身份账号', trigger: 'blur' },
    { min: 18, max: 18, message: '长度必须为18位', trigger: 'blur' },
  ],
  username: [
    { required: true, message: '请输入用户姓名', trigger: 'blur' },
    { min: 1, max: 18, message: '长度必须大于1位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度必须大于6位', trigger: 'blur' },
  ]
})


function zhuce(){
    add(ruleForm.value).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
          ruleForm.value=ref({})
        }else{
            ElMessage.error(res.data.msg)
        }
    })
}

</script>